<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图书管理系统</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        :root {
            --primary-color: #4361ee;
            --secondary-color: #3f37c9;
            --accent-color: #4895ef;
            --light-color: #f8f9fa;
            --dark-color: #212529;
            --success-color: #4cc9f0;
            --danger-color: #f72585;
            --warning-color: #fca311;
            --gray-color: #3d444b;
            --border-radius: 10px;
            --box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }

        body {
            background-color: #f0f2f5;
            color: var(--dark-color);
            line-height: 1.6;
        }

        .container {
            display: flex;
            min-height: 100vh;
            max-width: 1600px;
            margin: 0 auto;
        }

        /* 左侧功能区 */
        .sidebar {
            width: 300px;
            background: linear-gradient(135deg, #4361ee, #3a0ca3);
            color: white;
            padding: 25px 20px;
            box-shadow: var(--box-shadow);
            position: relative;
            z-index: 10;
        }

        .logo {
            display: flex;
            align-items: center;
            margin-bottom: 30px;
            padding-bottom: 20px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
        }

        .logo i {
            font-size: 28px;
            margin-right: 10px;
            color: #ffd166;
        }

        .logo h1 {
            font-size: 24px;
            font-weight: 700;
        }

        .add-book-form h2,
        .operations h2 {
            font-size: 18px;
            margin: 25px 0 15px;
            padding-bottom: 10px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
            color: #ffd166;
        }

        .form-group {
            margin-bottom: 15px;
        }

        .form-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: 500;
        }

        .form-group input,
        .form-group select,
        .form-group textarea {
            width: 100%;
            padding: 10px 12px;
            border-radius: 6px;
            border: none;
            background-color: rgba(255, 255, 255, 0.15);
            color: rgb(161, 165, 198);
            font-size: 14px;
        }

        .form-group input::placeholder,
        .form-group textarea::placeholder {
            color: rgba(255, 255, 255, 0.7);
        }

        .btn {
            display: inline-block;
            padding: 10px 20px;
            background-color: var(--success-color);
            color: white;
            border: none;
            border-radius: var(--border-radius);
            cursor: pointer;
            font-weight: 600;
            transition: all 0.3s ease;
            text-align: center;
            width: 100%;
            margin-top: 5px;
        }

        .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }

        .btn-add {
            background-color: var(--success-color);
        }

        .btn-edit {
            background-color: var(--warning-color);
        }

        .btn-delete {
            background-color: var(--danger-color);
        }

        .operations .btn {
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .operations .btn i {
            margin-right: 8px;
        }

        /* 右侧内容区 */
        .main-content {
            flex: 1;
            padding: 25px;
            background-color: var(--light-color);
        }

        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30px;
            flex-wrap: wrap;
            gap: 15px;
        }

        .search-box {
            flex: 1;
            max-width: 500px;
            display: flex;
            background: white;
            border-radius: 50px;
            overflow: hidden;
            box-shadow: var(--box-shadow);
        }

        .search-box input {
            flex: 1;
            padding: 12px 20px;
            border: none;
            outline: none;
            font-size: 16px;
        }

        .search-box button {
            background-color: var(--primary-color);
            color: white;
            border: none;
            padding: 0 25px;
            cursor: pointer;
            transition: background 0.3s;
        }

        .search-box button:hover {
            background-color: var(--secondary-color);
        }

        .filters {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }

        .filter-btn {
            padding: 8px 15px;
            background: white;
            border: 1px solid #dee2e6;
            border-radius: 30px;
            cursor: pointer;
            transition: all 0.3s;
            font-size: 14px;
            display: flex;
            align-items: center;
        }

        .filter-btn:hover {
            background-color: var(--primary-color);
            color: white;
            border-color: var(--primary-color);
        }

        .stats {
            display: flex;
            gap: 20px;
            margin-bottom: 30px;
            flex-wrap: wrap;
        }

        .stat-card {
            flex: 1;
            min-width: 200px;
            background: white;
            border-radius: var(--border-radius);
            padding: 20px;
            box-shadow: var(--box-shadow);
            display: flex;
            align-items: center;
        }

        .stat-icon {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 15px;
            font-size: 24px;
        }

        .books-count .stat-icon {
            background: rgba(76, 201, 240, 0.2);
            color: var(--success-color);
        }

        .categories-count .stat-icon {
            background: rgba(252, 163, 17, 0.2);
            color: var(--warning-color);
        }

        .available-count .stat-icon {
            background: rgba(67, 97, 238, 0.2);
            color: var(--primary-color);
        }

        .stat-info h3 {
            font-size: 28px;
            margin-bottom: 5px;
        }

        .stat-info p {
            color: var(--gray-color);
            font-size: 14px;
        }



        .books-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 25px;
            margin-top: 20px;
        }

        .book-card {
            background: white;
            border-radius: var(--border-radius);
            overflow: hidden;
            box-shadow: var(--box-shadow);
            transition: transform 0.3s, box-shadow 0.3s;
            position: relative;
        }

        .book-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
        }

        .book-thumbnail {
            height: 200px;
            background: linear-gradient(45deg, #4895ef, #3f37c9);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 70px;
        }

        .book-info {
            padding: 20px;
        }

        .book-category {
            position: absolute;
            top: 15px;
            right: 15px;
            background: rgba(255, 255, 255, 0.9);
            padding: 5px 12px;
            border-radius: 30px;
            font-size: 12px;
            font-weight: 600;
        }

        .book-status {
            position: absolute;
            top: 50px;
            right: 15px;
            background: rgba(255, 255, 255, 0.9);
            padding: 5px 12px;
            border-radius: 30px;
            font-size: 12px;
            font-weight: 600;
        }

        .book-title {
            font-size: 20px;
            font-weight: 700;
            margin-bottom: 8px;
            color: var(--dark-color);
        }

        .book-author {
            color: var(--gray-color);
            font-size: 14px;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
        }

        .book-author i {
            margin-right: 5px;
        }

        .book-meta {
            display: flex;
            justify-content: space-between;
            margin-top: 15px;
            padding-top: 15px;
            border-top: 1px solid #eee;
        }

        .book-isbn,
        .book-year {
            font-size: 13px;
            color: var(--gray-color);
        }

        .book-actions {
            display: flex;
            gap: 10px;
            margin-top: 15px;
        }

        .book-actions button {
            flex: 1;
            padding: 8px 0;
            border-radius: 6px;
            border: none;
            cursor: pointer;
            font-weight: 500;
            transition: all 0.2s;
        }

        .edit-btn {
            background: rgba(252, 163, 17, 0.15);
            color: var(--warning-color);
        }

        .delete-btn {
            background: rgba(247, 37, 133, 0.15);
            color: var(--danger-color);
        }

        .edit-btn:hover {
            background: var(--warning-color);
            color: white;
        }

        .delete-btn:hover {
            background: var(--danger-color);
            color: white;
        }

        /* 响应式设计 */
        @media (max-width: 992px) {
            .container {
                flex-direction: column;
            }

            .sidebar {
                width: 100%;
            }
        }

        @media (max-width: 576px) {
            .header {
                flex-direction: column;
                align-items: flex-start;
            }

            .search-box {
                width: 100%;
            }

            .books-grid {
                grid-template-columns: 1fr;
            }
        }

        /* 动画效果 */
        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(20px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .book-card {
            animation: fadeIn 0.5s ease-out;
            animation-fill-mode: both;
        }

        .book-card:nth-child(1) {
            animation-delay: 0.1s;
        }

        .book-card:nth-child(2) {
            animation-delay: 0.2s;
        }

        .book-card:nth-child(3) {
            animation-delay: 0.3s;
        }

        .book-card:nth-child(4) {
            animation-delay: 0.4s;
        }

        .book-card:nth-child(5) {
            animation-delay: 0.5s;
        }

        .book-card:nth-child(6) {
            animation-delay: 0.6s;
        }
    </style>
</head>

<body>
    <div class="container">
        <!-- 左侧功能区 -->
        <div class="sidebar">
            <div class="logo">
                <i class="fas fa-book"></i>
                <h1>图书管理系统</h1>
            </div>

            <div class="add-book-form">
                <h2><i class="fas fa-plus-circle"></i> 添加新图书</h2>
                <div class="form-group">
                    <label for="bookTitle">书名</label>
                    <input type="text" id="bookTitle" placeholder="输入书名">
                </div>
                <div class="form-group">
                    <label for="bookAuthor">作者</label>
                    <input type="text" id="bookAuthor" placeholder="输入作者">
                </div>
                <div class="form-group">
                    <label for="bookNumbern">数量</label>
                    <input type="text" id="bookNumber" placeholder="输入数据库存量">
                </div>
                <div class="form-group">
                    <label for="bookCategory">分类</label>
                    <select id="bookCategory">
                        <option value="">选择分类</option>
                        <option value="fiction">小说</option>
                        <option value="technology">科技</option>
                        <option value="history">历史</option>
                        <option value="science">科学</option>
                        <option value="art">艺术</option>
                        <option value="business">商业</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="bookPrice">价格</label>
                    <input type="text" id="bookPrice" placeholder="输入价格">
                </div>
                <div class="form-group">
                    <label for="bookStatus">状态</label>
                    <select id="bookStatus">
                        <option value="">选择状态</option>
                        <option value="1">可借阅</option>
                        <option value="0">不可借阅</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="bookpublish">出版社</label>
                    <input type="text" id="bookPublish" placeholder="请输入出版社">
                </div>
                <div class="form-group">
                    <label for="bookDesc">内容概述</label>
                    <input type="text" id="bookDesc" placeholder="请输入内容概述10~20字">
                </div>
                <button class="btn btn-add" id="addBookBtn">添加图书</button>
            </div>

            <div class="operations">
                <h2><i class="fas fa-tasks"></i> 系统操作</h2>
                <button class="btn btn-edit" type="button" id="refresh"><i class="fas fa-sync-alt"></i>刷新数据</button>
                <button class="btn"><i class="fas fa-file-export"></i> 导出数据</button>
                <button class="btn btn-delete"><i class="fas fa-trash-alt"></i> 批量删除</button>
            </div>
        </div>

        <!-- 右侧内容区 -->
        <div class="main-content">
            <div class="header">
                <div class="search-box">
                    <input type="text" placeholder="搜索书名、作者或ISBN...">
                    <button><i class="fas fa-search"></i></button>
                </div>
                <div class="filters">
                    <div class="filter-btn"><i class="fas fa-filter"></i> 全部</div>
                    <div class="filter-btn">小说</div>
                    <div class="filter-btn">科技</div>
                    <div class="filter-btn">历史</div>
                </div>
            </div>

            <div class="stats">
                <div class="stat-card books-count">
                    <div class="stat-icon">
                        <i class="fas fa-book"></i>
                    </div>
                    <div class="stat-info">
                        <h3 id="book_num"></h3>
                        <p>馆藏图书</p>
                    </div>
                </div>
                <div class="stat-card categories-count">
                    <div class="stat-icon">
                        <i class="fas fa-tags"></i>
                    </div>
                    <div class="stat-info">
                        <h3>6</h3>
                        <p>图书分类</p>
                    </div>
                </div>
                <div class="stat-card available-count">
                    <div class="stat-icon">
                        <i class="fas fa-check-circle"></i>
                    </div>
                    <div class="stat-info">
                        <h3 id="brrowing"></h3>
                        <p>可借阅图书</p>
                    </div>
                </div>
            </div>



            <h2><i class="fas fa-book-open"></i> 图书展示 <span
                    style="font-size: 16px; color: #6c757d; font-weight: normal;">(共 24 本)</span></h2>

            <div class="books-grid" id="books_grid">
                <!-- 动态加载 -->
            </div>

        </div>
    </div>

    <script src="./jquery-3.7.1.min.js"></script>
    <script>

        // 分类映射表
        const CATEGORY_MAP = {
            fiction: "小说",
            technology: "科技",
            history: "历史",
            science: "科学",
            art: "艺术",
            business: "商业"
        };

        $(document).ready(function () {

            //图书展示
            getBookList()
            function getBookList() {
                $.ajax({
                    type: "get",
                    url: "/book/getlist",
                    success: function (result) {
                        if (result != null) {
                            //拼接
                            var num = 0;
                            var brrowing_num = 0;
                            var finalhtml = "";
                            for (var book of result) {
                                num++;
                                if (book.statusCN == '可借阅') {
                                    brrowing_num++;
                                }
                                finalhtml += '<div class="book-card">';
                                finalhtml += '<div class="book-thumbnail">';
                                finalhtml += '<i class="fas fa-book"></i>';
                                finalhtml += '</div>';
                                finalhtml += '<span class="book-category">' + book.bookTypes + '</span>';
                                finalhtml += '<span class="book-status">' + book.statusCN + '</span>';
                                finalhtml += '<div class="book-info">';
                                finalhtml += '<h3 class="book-title">' + book.bookName + '</h3>';
                                finalhtml += '<div class="book-author">';
                                finalhtml += '<i class="fas fa-user"></i>' + book.author;
                                finalhtml += '</div>';
                                finalhtml += '<p class="book-desc">' + book.bookDesc + '</p>';
                                finalhtml += '<div class="book-meta">';
                                finalhtml += '<div class="book-isbn">' + "价格：" + book.price + '</div>';
                                finalhtml += '<div class="book-year">' + "库存量：" + book.count + '</div>';
                                finalhtml += '</div>';
                                finalhtml += '<div class="book-actions">';
                                finalhtml += '<button class="edit-btn"><i class="fas fa-edit"></i>' + "编辑" + '</button>';
                                finalhtml += '<button class="delete-btn"><i class="fas fa-trash"></i>' + "删除" + '</button>';
                                finalhtml += '</div></div></div>';
                            }
                            console.log(num);
                            $("#book_num").text(num);
                            $("#brrowing").text(brrowing_num);
                            $("#books_grid").html(finalhtml);
                        }
                    }
                });
            }


            // 添加图书按钮点击事件
            $("#addBookBtn").click(function () {
                const title = $("#bookTitle").val();
                const author = $("#bookAuthor").val();
                const number = $("#bookNumber").val();
                const category = CATEGORY_MAP[$("#bookCategory").val()];
                const price = $("#bookPrice").val();
                const status = $("#bookStatus").val();
                const publish = $("#bookPublish").val();
                const desc = $("#bookDesc").val();
                console.log(title)
                console.log(author)
                console.log(number)
                console.log(category)
                console.log(price)
                console.log(status)
                console.log(publish)
                console.log(desc)

                if (!title || !author || !number || !category || !price || !status || !publish || !desc) {
                    alert("请填写所有必填字段！");
                    return;
                }

                // // 这里可以添加AJAX请求到后端
                // alert(`图书添加成功！\n书名：${title}\n作者：${author}\nISBN：${number}\n分类：${category}\n年份：${publish}`);
                //请求后端。添加图书
                $.ajax({
                    type: "post",
                    url: "/book/addBook",
                    contentType: "application/json",
                    data: JSON.stringify({
                        bookName: title,
                        author: author,
                        count: number,
                        bookTypes: category,
                        price: price,
                        status: status,
                        publishName: publish,
                        bookDesc: desc
                    }),
                    success: function (ret) {
                        if (ret == "") {
                            alert("添加成功!");
                            getBookList();
                        } else {
                            alert("添加失败：" + ret);
                        }
                    },
                    error: function (error) {
                        console.log(error);
                    }
                })
                // 清空表单
                $("#bookTitle, #bookAuthor, #bookNumber, #bookPublish, #bookPrice, #bookStatus,#bookDesc").val("");
                $("#bookCategory").val("");
            });

            //刷新操作
            $("#refresh").click(function () {
                getBookList();
                alert("刷新完成！");
            });

            // 搜索功能
            $(".search-box button").click(function () {
                const searchTerm = $(".search-box input").val();
                if (searchTerm) {
                    alert(`执行搜索: ${searchTerm}`);
                    // 这里可以添加AJAX搜索请求
                }
            });

            // 删除按钮事件
            $(".delete-btn").click(function () {
                const bookCard = $(this).closest(".book-card");
                const bookTitle = bookCard.find(".book-title").text();

                if (confirm(`确定要删除《${bookTitle}》吗？`)) {
                    bookCard.fadeOut(300, function () {
                        $(this).remove();
                    });
                }
            });

            // 编辑按钮事件
            $(".edit-btn").click(function () {
                const bookCard = $(this).closest(".book-card");
                const bookTitle = bookCard.find(".book-title").text();
                const bookAuthor = bookCard.find(".book-author").text().replace(" ", "").replace(/\s+/g, ' ').trim();

                // 在实际应用中，这里会打开一个编辑模态框
                alert(`编辑图书: ${bookTitle}\n作者: ${bookAuthor}`);
            });

            // 分类过滤
            $(".filter-btn").click(function () {
                $(".filter-btn").css({
                    "background": "white",
                    "color": "var(--dark-color)",
                    "border-color": "#dee2e6"
                });

                $(this).css({
                    "background": "var(--primary-color)",
                    "color": "white",
                    "border-color": "var(--primary-color)"
                });

                const category1 = $(this).text();
                if (category1 === "全部") {
                    $(".book-card").show();
                } else {
                    $(".book-card").hide();
                    $(`.book-category:contains(${category1})`).closest(".book-card").show();
                }
            });
        });
    </script>
</body>

</html>